<template>
  <div class="sdy-home-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        class="list-box"
        v-model:loading="loading"
        :finished="finished"
        offset="50"
        @load="getListHandler"
        finished-text="没有更多了 O(∩_∩)O~">
        <div class="list-item" v-for="item in goodsList" :key="item.proid">
          <img :src="item.img1" alt="">
          <p class="title">{{ item.proname }}</p>
          <p class="price">￥ {{ item.originprice }}</p>
          <p class="other">
            <span>{{ item.discount }} 条评论</span>
            <span>看相似</span>
          </p>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script name="sdyHomeList" setup lang="ts">
import { getGoodsList } from '../../../model/goods'
import { ref } from 'vue'

// 定义接口
interface GoodsInfo {
  img1?: string
  proid?: string
  proname?: string
  originprice?: number
  discount?: number
  [key: string]: any
}

interface Response {
  code: string
  data: Array<GoodsInfo>
}

// 表示是否在加载中
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)
// 下拉刷新
const refreshing = ref<boolean>(false)

const goodsList = ref<Array<GoodsInfo>>([])

// 准备一个变量, 表示当前第几页
const pagenum = ref<number>(1)

// 准备一个发送请求的方法
const getListHandler = () => {
  setTimeout(async () => {
    const res = await getGoodsList(pagenum.value)
    if ((res as unknown as Response).code !== '200') return
    // 注意: 不能进行赋值, 应该向原始数组内追加
    goodsList.value.push(...res.data)
    // 判断 res.data 不足 10 条的时候, 没有更多了
    if (res.data.length < 10) finished.value = true
    pagenum.value++
    // 页面渲染完毕, 调整 loading 为 true
    loading.value = false
    // 让下拉刷新还原
    refreshing.value = false
  }, 1000)
}

// 下拉刷新的事件
const onRefresh = () => {
  // console.log('要刷新了')
  // 咱们自己模拟一个随机的 1 ~ 5 页
  pagenum.value = Math.floor(Math.random() * 5) + 1
  // 把数组清空
  goodsList.value = []
  // 把完成状态还原到未完成
  finished.value = false
  // 发送一次请求
  getListHandler()

}


</script>

<style lang="scss" scoped>
.sdy-home-list {
  margin-top: 10px;
}

.list-box {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;

  > .list-item {
    width: 45%;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;

    > img {
      width: 90%;
      height: 220px;
      display: block;
      margin: 0 auto;
      margin-top: 5px;
    }

    > p.title {
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      margin: 10px;
      font-size: 14px;
    }

    > p.price {
      margin: 10px;
      color: red;
      font-size: 18px;
    }

    > p.other {
      display: flex;
      padding: 0 10px 10px;
      justify-content: space-between;
      align-items: center;

      > span {
        font-size: 12px;

        &:first-child {
          color: #ccc;
        }

        &:last-child {
          padding: 5px;
          background-color: #F2F2F2;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
